<template>
  <div>
    <!-- 使用全局组件 -->
    <header-com></header-com>
    <!-- -->
    购物车
    <input type="text" v-focus="true">
    <!-- router-link用path跳转 -->
    <router-link to="/about">
      <button>去about页</button>
    </router-link>
    <!-- router-link用name的跳转 -->
    <!-- vue的属性 渲染固定的数据
    如布尔 ，数字 ，对象 都要加v-bind加:-->
    <router-link :to="{name:'Home'}">去首页</router-link>
    <button @click="$router.go(1)">前进</button>
    <button @click="toAbout">js跳去about页</button>
    <button @click="$router.push('/')">去首页</button>
    <hr>
    <router-link :to="'/cate/'+myid">去分类</router-link>
    <button @click="send">跳转并params传参</button>
    <button @click="toCate" >去分类query传参</button>
  </div>
</template>

<script>
export default {
  name: '2209vueCart',
  data() {
    return {
      myid:1988,
      home:"黑龙江"
    };
  },

  methods: {
      toAbout(){
        // 编程式导航 this.$router.push()
        // this.$router.push("/about") //用path跳
        // this.$router.push({path:"/about"}) //用path跳
        // this.$router.push({name:"About"})

        // 跳转并不产生历史记录
        this.$router.replace({name:"About"})
      },
      send(){
        // 用params传参 传参只有固定参数会显示在地址栏
        // 其他不显示
        this.$router.push({
          name:"Cate",
          params:{
            myhobby:"吃喝玩乐",
            tizhong:150
          }
        })
      },
      toCate(){
        // query传参
        // query传参 在地址栏显示 刷新不丢失
      // vue路由传参如何实现，有什么区别
      // params传参 不在地址栏显示 刷新参数会丢失
      // query传参在地址栏显示 类似ajax请求的get传参
      // 刷新不会丢失参数
        this.$router.push({
          name:"Cate",
          query:{
            myhome:this.home,
            myname:"麦克阿瑟"
          }
        })
      }
  },
};
</script>